import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { Link, NavLink } from 'react-router-dom'
import { HeaderLeft, HeaderRight, HeaderWrapper } from './style'
import { Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'

// Header链接区域的标签名
import headerTitles from '@/assets/data/header_titles.json'

interface IProps {
  children?: ReactNode
}

const AppHeader: React.FC<IProps> = (props) => {
  // 高亮标签（配合Redux）（这里我们不这么写，我们使用NavLink，更省事）
  // NavLink可以有active状态，会根据路径自动添加active
  // const [currentIndex, setCurrentIndex] = useState(0)

  // 判断超链接还是路由跳转
  function showItem(item: any) {
    if (item.type === 'path')
      return (
        <NavLink
          to={item.link}
          className={({ isActive }) => {
            return isActive ? 'active' : undefined
          }}
        >
          {item.title}
          {/* 这个精灵图就是选中的红色倒三角 */}
          <i className="icon sprite_01"></i>
        </NavLink>
      )
    else
      return (
        <a href={item.link} rel="noreferrer" target="_blank">
          {item.title}
        </a>
      )
  }

  return (
    <HeaderWrapper>
      <div className="content wrap-v1">
        <HeaderLeft>
          {/* logo区域 */}
          <a className="logo sprite_01" href="/">
            wangyiyun_music
          </a>
          {/* 链接区域 */}
          <div className="title-list">
            {headerTitles.map((item) => {
              return (
                <div className="item" key={item.title}>
                  {showItem(item)}
                </div>
              )
            })}
          </div>

          {/* <Link to={'/discover'}>发现音乐</Link>
          <Link to={'/mine'}>我的音乐</Link>
          <Link to={'/focus'}>我的关注</Link>
          <Link to={'/download'}>下载客户端</Link> */}
        </HeaderLeft>
        <HeaderRight>
          <span className="input">
            <Input
              className="search"
              placeholder="音乐/视频/电台/用户"
              prefix={<SearchOutlined />}
            />
          </span>
          <span className="center">创作者中心</span>
          <span className="login">登录</span>
        </HeaderRight>
      </div>
      {/* 红色分割线 */}
      <div className="divider"></div>
    </HeaderWrapper>
  )
}

export default memo(AppHeader)
